<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button id="getBtn">GET AJAX</button>
    <button id="postBtn">POST AJAX</button>
    <button id="putBtn">PUT AJAX</button>
    <button id="deleteBtn">Delete AJAX</button>

    <script>
        const getBtn = document.getElementById('getBtn')
        const postBtn = document.getElementById('postBtn')
        const putBtn = document.getElementById('putBtn')
        const deleteBtn = document.getElementById('deleteBtn')

        
        //发送get类型ajax请求
        getBtn.onclick = ()=>{
            //1.创建xhr对象
            const xhr = new XMLHttpRequest()
            //2.指定请求头信息=> 初始化请求 还没有发请求
            xhr.open('GET','http://localhost:9812/server/2?name=tom&age=11',true)
            //3.发送异步ajax请求(也是http)
            xhr.send()// get请求不能携带请求体,所有没有参数
        }

        //发送post类型ajax请求
        postBtn.onclick = ()=>{
            //1.创建xhr对象
            const xhr = new XMLHttpRequest()
            //2.指定请求头信息=> 初始化请求 还没有发请求
            xhr.open('POST','http://localhost:9812/server/2?name=tom&age=11',true)
            //3.指定请求头的类型
            // xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded;charset=utf-8')
            xhr.setRequestHeader('Content-Type','application/json;charset=utf-8')
            //4.发送异步ajax请求(也是http)
            // xhr.send('sex=男&like=foot')//post请求能携带请求体,所有没有参数
            xhr.send('{"sex":"女", "like": "basket"}')
        }
        //发送put类型ajax请求
        putBtn.onclick = ()=>{
            //1.创建xhr对象
            const xhr = new XMLHttpRequest()
            //2.指定请求头信息=> 初始化请求 还没有发请求
            xhr.open('PUT','http://localhost:9812/server/2?name=tom&age=11',true)
            //3.指定请求头的类型
            // xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded,cherset=utf-8')
            xhr.setRequestHeader('Content-Type','application/json')
            //4.发送异步ajax请求(也是http)
            // xhr.send('sex=男&like=foot')//post请求能携带请求体,所有没有参数
            xhr.send('{"sex":"女","like":"basket"}')
        }
        // 发送delete类型ajax请求
        deleteBtn.onclick = ()=>{
            //1.创建xhr对象
            const xhr = new XMLHttpRequest()
            //2.指定请求头信息=> 初始化请求 还没有发请求
            xhr.open('DELETE','http://localhost:9812/server/2?name=tom&age=11',true)
            //3.指定请求头的类型
            // xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded,cherset=utf-8')
            xhr.setRequestHeader('Content-Type','application/json')
            //4.发送异步ajax请求(也是http)
            // xhr.send('sex=男&like=foot')//post请求能携带请求体,所有没有参数
            xhr.send('{"sex":"女","like":"basket"}')
        }
    </script>
</body>
</html>